<template>
  <div class="loginstyle">
    <transition name="el-zoom-in-center">
        <div v-show="show" class="transition-box">

          <div class="login">登录</div>

          <el-form ref="form" :model="fromMessage" label-width="60px" :rules="rules" :inline-message="true">
            <el-form-item label="账号" prop="username">
              <el-col :span="20">
             <el-input v-model="fromMessage.username" placeholder="请输入账号"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-col :span="20">
                <el-input v-model="fromMessage.password" placeholder="请输入密码" type="password"> </el-input>
              </el-col>

            </el-form-item>
          </el-form>
<!--          <loadingbtn-->
<!--          :content="content"-->
<!--          @btnajaxfunc="btnajaxfunc"-->
<!--         ></loadingbtn>-->
          <el-button @click="func" type="primary" style="width: 70%;margin: 0 auto;">登录</el-button>
         <div @click="()=>{this.$router.push('./register')}" class="reStyle">注册</div>
        </div>
      </transition>
  </div>
</template>

<script>
import Loadingbtn from '@/components/Loadingbtn'
import {setStorge} from '@/router/helper'
import axios from 'axios'
export default {
  name: 'login',
  components: {
    Loadingbtn
  },
  // created(){
  //   axios({
  //       method: 'get',
  //       url: 'http://lsmy-devimage.oss-cn-shenzhen.aliyuncs.com/image/2021-03-1483ceabacb62f467083574d78b28f1258.png',
  //     responseType:'arraybuffer'
  //   }).then(res=>{console.log(res)})
  // },
  data () {

    // let username = (rule,value,callback)=>{
    //   if(!this.content.data.username){
    //     return callback(new Error('请输入账号'))
    //   }else{
    //     return callback()
    //   }
    // }
    // let password = (rule,value,callback) =>{
    //   if(!this.content.data.password){
    //     console.log(value)
    //     return callback(new Error('请输入密码'))
    //   }else {
    //     return callback()
    //   }
    // }
    return {
      // content: {
      //   text: '登录',
      //   style: {width: '90%',height:'40px'},
      //   typeurl: '/login',
      //   headers:{
      //     'Content-Type': 'application/json',
      //   },
      //   data:{
      //     username:'',
      //     password:''
      //   }
      // },
      show: true,
      value: {},
      fromMessage: {},
      rules:{
        // password:[{validator: password, trigger: 'blur' }],
        // name:[{validator: username, trigger: 'blur' }]
        username:[
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },
        ]
      }
    }
  },
  methods: {
    btnajaxfunc (value) {

    },
    func(){
      this.$refs.form.validate(res=>{
        console.log(res)
        let _this =this
        if(res){
          this.$ajax({
            method: 'POST',
            url: '/login',
            data: JSON.stringify({
              password:this.fromMessage.password,
              username:this.fromMessage.username
            }),
            headers:{
              'Content-Type': 'application/json',
            }
          }).then(res=>{
            setStorge(res.token,'token')
           this.$ajax({
             method: 'GET',
             url: '/getLoginUserInfo',

           }).then(result=>{
             setStorge(result.data.userEntity.role,'role')
             setStorge(result,'userInfo')
              if(result.data.userEntity.role==0){
                this.$router.push({
                  name:'project-massage'
                })
              }else if(result.data.userEntity.role==1){
                this.$router.push({
                  name:'companyIndex'
                })
              }else{
                this.$router.push('/student')
              }
           })
            this.$message.success('登录成功')
          }).catch(res=>{
            this.$message.error(res.msg)
            // console.log(res.msg,'chenggong')
          })
        }
      })

    }
  },
  mounted(){
  }
}
</script>

<style lang="less" scoped>
.loginstyle{
  width: 100%;
  height: 100%;
  // background-color: red;
  background: url('../assets/2.jpg');
  background-size: 100% 100%;
}
  .transition-box {
    display: flex;
    flex-direction: column;
    // align-content: space-around;
    // flex-flow: wrap;
    justify-content: space-around;
    margin-bottom: 2.778vw;
    width: 27.778vw;
    height: 27.778vw;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    text-align: center;
    color: #fff;
    // padding: 40px 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 20px;
    // border: 1px solid rgba(226, 226, 226, 0.5);
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    .login{
      font-size: 33px;
    letter-spacing: 27px;
    }
   .el-form{
      width: 90%;
      // background: aqua;
      margin: 0 auto;
      .el-form-item{
        // background-color: red;
        .el-form-item__label{
          background-color: blue;
      text-align: center;
      }
      }
      }
  }
  .reStyle{
    width: 100px;
    height: 40px;
    color: blue;
    font-size: 13px;
    position: absolute;
    bottom: 20%;
    right: 5%;
  }

</style>
